<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/headerCss.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />

    <style>
      .navbar {
        width: 100%;
        height: 18px;
        background-color: #e7eaed;
        padding: 16px 60px;
      }
      .navbar a {
        color: #333333;
      }
      article {
        width: 100%;
        padding-top: 21px;
        padding-left: 99px;
        /* 删除 */
        height: 2000px;
      }
      .fined {
        width: 200px;
        height: 54px;
        background-color: #d6be7f;
        border-radius: 8px;
        color: #ffffff;
      }
      .setting {
        color: #333333;
        margin-bottom: 21px;
        margin-left: 118px;
      }
      .setting .exit {
        background-color: transparent;
        border: 0;
        font-family: SourceHanSansSC-Normal;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #e02c32;
        margin-left: 10px;
        margin-right: 40px;
      }
      /*         .el-radio__inner::after {
            background-color: #d6be7f;
        } */
      .el-switch {
        margin-right: 78px;
      }
      .el-switch.is-checked .el-switch__core::after {
        left: 89%;
      }
      .el-switch__core {
        height: 26px;
        border-radius: 13px;
      }
      .el-switch__core::after {
        width: 22px;
        height: 22px;
      }
      .upload,
      .covers,
      .author {
        margin-left: 37px;
      }
      .upload .inf {
          float: left;
      }
      .el-upload-list {
        margin-left: 16px;
      }
      .el-upload {
          position: relative;
          margin-left: 16px;
      }
      .el-upload .tiper {
          height: 18px;
          line-height: 18px;
          position: absolute;
          top:95px;
          left: 43px;
      }
      .authorinfo {
          overflow: hidden;
      }
      .authorinfo div{
          float: left;
          margin-right: 120px;
      }
      .author .au {
          margin-top: 30px;
          margin-bottom: 30px;
          margin-left: 30px;
      }
      .author .au .el-input {
        width: 280px;
        height: 38px;
      }
      .fromhe>.el-input:not(:last-child) {
        width: 280px !important;
        height: 38px !important;
      }
      .el-form-item__content,
      .el-input,
      .el-input__inner {
        width: 280px;
        height: 38px;
      }
      .fromhe .el-from-item {
      }
      .el-col-11 {
          width: 200px;
      }
      .fromhe {
          margin-top: 28px;
      }
      .fromhe .el-form-item__label {
        display: inline-block;
        width: 141px;
        text-align: right;
      }
      .el-upload-list__item,
      .el-upload-list__item-thumbnail,
      .el-upload-list__item-actions {
        width: 150px !important;
        height: 200px !important;
        border:0 !important;
        border-radius: 0 !important;
      }
      .el-upload--picture-card {
        width: 150px;
        height: 200px;
        margin-left: 24px;
        border:0 ;
        border-radius: 0 ;
        background-color: #e7eaed;
      }
      .covers {
        position: relative;
      }
      .fenmian {
        display: inline-block;
        position: absolute;
        top:0;
      }
      .covers img{
        width: 150px;
        height: 200px;
        margin-right: 26px;
      }
      .covers div:nth-last-child(1) {
        display: inline-block;
        margin-left: 86px;
      }
      .el-upload-list__item {
      }
      .el-upload-list__item-status-label {
        display: none !important;
      }
      .el-icon-upload-success {
        display: none;
      }
      .colsrow {
        width: 72rem;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="hd">
        <div class="logo">
          <a><img src="./img/组%2017(4).png" /></a>
          <select>
            <option>藏品</option>
            <option>藏品</option>
          </select>
        </div>
        <div class="userinfo">
          <a>
            <img src="./img/logo(1).png" />
          </a>
          <select>
            <option>叶文洁</option>
            <option>退出</option>
          </select>
        </div>
      </div>
      <div class="menu">
        <div class="courcolor">
          <img src="./img/组2.png" />
          <a href="#">藏品入库</a>
        </div>
        <div>
          <img src="./img/组2.png" />
          <a href="#">藏品展示</a>
        </div>
        <div>
          <img src="./img/组3.png" />
          <a href="#">回收站</a>
        </div>
        <div>
          <img src="./img/组%204.png" />
          <a href="#">操作记录</a>
        </div>
      </div>
      <div class="navbar">
        <a href="#" class="fontSize">藏品库</a>>
        <a href="#" class="fontSize">详细信息</a>
      </div>
    </header>
    <article id="app">
      <div class="setting fontSize">
        <button class="fined fontSize">更新完成</button>
        <button class="exit">取消</button>
        藏品展示：<el-switch
          v-model="value"
          width="60"
          style="height: 26px;"
          active-color="#d6be7f"
          inactive-color="#ff4949"
        >
        </el-switch>
        首页展示：
        <el-radio-group v-model="radio">
          <el-radio label="1" fill="#ffffff">备选项</el-radio>
          <el-radio label="2">备选项</el-radio>
        </el-radio-group>
      </div>
      <div class="upload">
        <div class="inf">展示作品:</div>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :file-list='fileList'
        >
          <i class="el-icon-plus"></i>
          <solt name="tip" class="tiper">
              上传图片
            </solt>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>
      <div class="covers">
        <div class="fenmian">设置封面:</div>
        <div>
          <img src="./upload/002.jpg" />
          <img src="./upload/002.jpg" />
          <img src="./upload/002.jpg" />
          <div></div>
        </div>
      </div>
      <div class="author">
          <div class="au">作者：<el-input value="梵高"></el-input></div>
          <div class="authorinfo">
              <div> 作者简历：<i class="el-icon-s-order"></i> <a href="#">梵高</a></div>
              <div>联系方式: 18172006956</div>
              <div>通讯地址: 湖北省武汉市江岸区三阳路808号</div>      
           </div>
      </div>
      <div class="fromhe">
        <el-form ref="form" :inline="true" :model="form" >
            <el-row>
          
                <el-form-item label="藏品登记号:"  label-width="120px">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="分类号:" >
                <el-input v-model="form.name"></el-input>
                </el-form-item>
  
                <el-form-item label="藏品名称:" >
                <el-input v-model="form.name"></el-input>
                </el-form-item>

            </el-row>
            
            <el-row>

                <el-form-item label="尺寸:" label-width="120px"> 
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>

                <el-form-item label="入藏日期:"  >
                  <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                  </el-col>
                </el-form-item>

                <el-form-item label="类别:" >
                  <el-select v-model="form.region" placeholder="油画">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>

            </el-row>
            <el-row>
              <el-form-item label="创作年代:" label-width="120px">
                  <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="实际数量:">
              <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="质地:">
              <el-input v-model="form.name"></el-input>
              </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="工艺技法:" label-width="120px">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="形态行质:">
            <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="题识印鉴:">
            <el-input v-model="form.name"></el-input>
            </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="完残程度:" label-width="120px">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="来源(捐赠或收购):">
          <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="版本:">
          <el-input v-model="form.name"></el-input>
          </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="藏品登记号:" label-width="120px">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="库房位号:">
        <el-input v-model="form.name"></el-input>
        </el-form-item>
    </el-row>
            <el-row>
            <el-form-item label="创作说明:" label-width="120px">
              <el-input type="textarea" v-model="form.desc" class="colsrow"></el-input>
            </el-form-item>
            </el-row>
          </el-form>
      </div>
    </article>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: function () {
          return {
            value: true,
            radio: "1",
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [{
              name: 'weixin1.png',
              url: './upload/002.jpg'
            }],
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '文森特·威廉·梵高，这位用明亮鲜活的色彩吸引了全世界目光的天才画家，却在美丽的法国瓦兹河畔结束了自己37岁的年轻生命。他传奇不朽的一生已多次被搬上电影银幕。'
            }
          };
        },
        methods: {
            handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
        }
      });
    </script>
    <script>
      let divs = document.querySelectorAll(".menu div");
      console.log(divs);
      for (let i = 0; i < divs.length; i++) {
        divs[i].onclick = function () {
          for (var j = 0; j < divs.length; j++) {
            divs[j].removeAttribute("class");
          }
          this.className = "courcolor";
        };
      }
    </script>
  </body>
</html>
